<template>
  <div class="dashboard-container">
    <el-card shadow="never" class="box-card">
      <div slot="header" class="clearfix">
        <el-card shadow="never" class="box-card1">
          <div class="text item">
            <p>
              今日新增用户量:
              <span style="color: #6aabff; font-size: 20px">{{
                datalist.userTodayCount
              }}</span>
            </p>
            <p>
              用户总量:
              <span style="color: #6aabff; font-size: 20px">{{
                datalist.memberCount
              }}</span>
            </p>
          </div>
        </el-card>
        <el-card shadow="never" class="box-card1">
          <div class="text item">
            <p>
              今日新增订单量:
              <span style="color: #6aabff; font-size: 20px">{{
                datalist.orderTodayCount
              }}</span>
            </p>
            <p>
              订单总量:
              <span style="color: #6aabff; font-size: 20px">{{
                datalist.orderCount
              }}</span>
            </p>
          </div>
        </el-card>
        <el-card shadow="never" class="box-card1">
          <div class="text item">
            <p>
              今日新增退单量:
              <span style="color: #6aabff; font-size: 20px">{{
                datalist.orderReturnTodayCount
              }}</span>
            </p>
            <p>
              退单总量:
              <span style="color: #6aabff; font-size: 20px">{{
                datalist.orderReturnCount
              }}</span>
            </p>
          </div>
        </el-card>
        <el-card shadow="never" class="box-card1">
          <div class="text item">
            <p>
              今日新增商品量:
              <span style="color: #6aabff; font-size: 20px">{{
                datalist.orderTodayCount
              }}</span>
            </p>
            <p>
              商品总量:
              <span style="color: #6aabff; font-size: 20px">{{
                datalist.productCount
              }}</span>
            </p>
          </div>
        </el-card>
      </div>
      <div class="text item">
        <div class="Box">
          <div ref="orderBox" class="box" />
          <div ref="orderBox1" class="box" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import baseDataApi from "@/api/order/backGoods/index";
import { getBaseData as getBaseDataApi } from "@/api/login";
export default {
  name: "Dashboard",
  computed: {},
  data() {
    return {
      datalist: [],
      orderEcharts: {}, // 订单echarts对象
    };
  },
  methods: {
    init() {
      baseDataApi.baseData().then((res) => {
        console.log(res);
        this.datalist = res.data;
      });
    },
    getData() {
      getBaseDataApi().then((res) => {
        if (res.success) {
          console.log(res);
          // 初始化柱状图
          // 在容器加载以后执行echart初始化
          this.initOrderEcharts(
            res.data.orderBydayList
            // res.data.orderReturnBydayList
          );
          this.initBackOrderEcharts(
            res.data.orderReturnBydayList
            // res.data.orderReturnBydayList
          );
        } else {
          this.$message.error("获取数据失败");
        }
      });
    },
    initOrderEcharts(orderData) {
      // 初始化 echarts
      this.orderEcharts = this.$MyEcharts.init(this.$refs.orderBox);
      const xData = orderData.map((item) => {
        return item.date;
      });
      const orderArr = orderData.map((item) => {
        return item.count;
      });
      // const returnOrderArr = [6, 5, 10, 55, 11, 11, 22, 34];
      // 绘制图表
      this.orderEcharts.setOption({
        color: ["#c23531"],
        title: {
          text: "订单数据柱状图",
        },
        tooltip: {},
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          // xData 把接口的数据放入X轴
          data: xData,
          // axisLabel: {
          //   interval: 0,
          //   rotate: 45,
          // },
        },
        yAxis: {},
        series: [
          {
            name: "订单",
            type: "bar",
            data: orderArr,
          },
          // type line:折线图  bar:柱状图 pie:饼状图
          // {
          //   name: "退单",
          //   type: "line",
          //   data: returnOrderArr,
          // },
        ],
      });
    },
    initBackOrderEcharts(orderData) {
      // 初始化 echarts
      this.orderEcharts = this.$MyEcharts.init(this.$refs.orderBox1);
      const xData = orderData.map((item) => {
        return item.date;
      });
      const orderArr = orderData.map((item) => {
        return item.count;
      });
      // const returnOrderArr = [6, 5, 10, 55, 11, 11, 22, 34];
      // 绘制图表
      this.orderEcharts.setOption({
        color: ["#2f4554"],
        title: {
          text: "退单数据柱状图",
        },
        tooltip: {},
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          // xData 把接口的数据放入X轴
          data: xData,
          // axisLabel: {
          //   interval: 0,
          //   rotate: 45,
          // },
        },
        yAxis: {},
        series: [
          {
            name: "订单",
            type: "bar",
            data: orderArr,
          },
          // type line:折线图  bar:柱状图 pie:饼状图
          // {
          //   name: "退单",
          //   type: "line",
          //   data: returnOrderArr,
          // },
        ],
      });
    },
  },
  created() {
    this.init();
    this.getData();
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
@import "~@/styles/index.scss";
.box-card {
  width: 97%;
  margin: 15px auto;
}
.clearfix {
  display: flex;
  justify-content: space-between;
}
.box-card1 {
  width: 23%;
  margin: 0px auto;
}
.Box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 80px;
  .box {
    width: 800px;
    height: 500px;
  }
}
</style>
